Transcript Slide 1
Basic Accessible Design Techniques
Introduction to Web Accessibility
Copyright © 2005 Knowbility, Inc .
2005.12.19
Accessible Web Design Techniques 1
Introductions & Pretest
►
Who you are?
►
Why Are You Here?
►
Accessibility Knowledge Level
► ► ► 0 – don’t know a thing 1 – Accessibility Novice 3 – solid accessibility knowledge ► 5 - Expert Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 2
Course Objectives
Learn the Basics of How to Make Web Elements Accessible
‣ ‣ ‣ Alternatives: images, maps, multimedia, color, quality link text Stylesheets, Tables, Frames, Scripting, Forms, Navigation Things to Avoid: Pop-ups, Timed Processes, Flicker ‣ Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 3
Who is responsible for web accessibility?
‣ we can only control how sites & pages are built ‣ ‣ techniques we use have significant impact on accessibility Web Content Accessibility Guidelines (WCAG) ‣ ‣ ‣ others are responsible too ‣ Authoring Tool Accessibility Guidelines (ATAG) ‣ These are the rules for people who create software like
Dreamweaver
and
FrontPage
and
Content Management Systems
.
User Agent Accessibility Guidelines (UAAG) Rules for people who create user agents, like
browsers
(for example,
Firefox
and
Internet explorer
) and
assistive technology
(screenreaders.and speech recognition software) Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 4
How-General Web Development Techniques
‣ ‣ ‣ ‣
HyperText Markup Language (HTML and XHTML)
Semantic, structural markup (headings, lists, quotes, etc ‣ Includes things not in Section 508 (acronyms, abbreviations, language changes, validation) Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4
Cascading Style Sheets (CSS) JavaScript (JS)
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 5
How is XHTML different than HTML?
well-formed
► ► ► all elements must either have closing tags
or► ► all the elements must nest properly
Help!
► ►lower case
lower case for all HTML element and attribute names ► ►
quotes
attribute values must be quoted Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 6
► ► ►
Mandatory XHTML Elements
Recommended DOCTYPE is XHTML 1.0 Transitional Tutorial on XHTML http://www.w3schools.com/xhtml/ Validate your XHTML at http://validator.w3.org/
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 7
Making Simple Elements Accessible
► Alternatives for Images Maps Multimedia ► Considerations in using color and contrast ► Quality link text Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 8
Providing Alternatives
► people that are blind or have low-vision can/may not see images ► they need a description of the purpose of the image Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 9
Alternative Text Examples
alt=“United Nations Flag”
... />
alt=“Aeronautics”
width=… /> Possibly:
title=“Visit the Aeronautics Home Page”
alt=“”
width=“1” height=“1” /> Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 10
Alternate Text Guidelines
► Every image must have a valid alt attribute. ► Images which are not active and which do not convey information should have alt=“” ► ► Image links must have a non-empty alt attribute.
Each INPUT of TYPE=“IMAGE” must have alt-text specifying the purpose of the button ► Each AREA of a MAP must have a valid alt attribute (more later) Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 11
Alternate Text Problems
Too Long ► ► “Image of the United Nations Flag (Blue background with white olive branches surrounding map of world) about one and a quarter inches by one inch.” ► ► Makes reference to link “link to aeronautics home page” ► ► File information “spacer.gif 236 bytes” ► ► Meaningless out of context “button” Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 12
Alternate Text Problems
► A big problem is deciding what is meaningful and what is purely visual ► alt=“” or alt=“people using library services” Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 13
Long Descriptions
► Sometimes short alt text is not enough ► ► an HTML attribute longdesc necessarily the best solution is available but isn’t longdesc points to a URL that has a “long description” of the image "A picture is worth a thousand words... some people need the thousand words... And some people might want and need both” Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 14
longdesc Example
Some images need “long descriptions” like charts and graphs
longdesc=“traffic.htm”
alt=“traffic density graph” />
traffic.htm:
This graph shows traffic density on Main and Center streets measured in … Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 15
longdesc “Alternative”
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 16
Alternate Text Guidelines
(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content) Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1. What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 17
Image Maps
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 18
Image Maps
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 19
Image Maps
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 20
Image Map Guidelines
(e) Redundant text links shall be provided for each active region of a server-side image map. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Server side maps require the use of a mouse. Many disabled users cannot use a mouse. Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 21
Multimedia Strategy
► Include a text transcript for informational audio file. ► Provide synchronized text equivalents (captions) for the audio content of a multimedia presentation. ► Provide synchronized audio descriptions of significant video information in multimedia presentations.
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 22
Multimedia Solutions
► MAGPie - free software that helps you caption ► http://ncam.wgbh.org/webaccess/magpie ► Sample video with captions and audio descriptions: ► NCAM Rich Media Project Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 23
Multimedia Guidelines
(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 24
Exercise – Issues with Color
► What happens when we use color in our design to convey information?
► What else do we need to consider when using color in our design?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 25
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 26
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 27
Exercise – Issues with Color
► How can we overcome the problems with color blindness or lack of color in the previous example?
► How might we do the same on a web page?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 28
Color: What not to do
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 29
Color: How to fix it
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 30
Color Contrast
‣ Can you read me?
‣ ‣ ‣ ‣ ‣ ‣ Can you read me now?
Can you read me now?
Can you read me now?
Can you read me now?
Use the color contrast analyzer:
http://juicystudio.com/services/colourcontrast.php
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 31
Exercise - Color & Links
► Do you underline your links?
► Or are your links obvious by color alone?
► Example ► Imagine you are colorblind ► Tell me how many links are in the second paragraph of information: en.wikipedia.org/wiki/Abraham_lincoln Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 32
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 33
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 34
Color Guidelines
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 35
Exercise – Link Lists
► Imagine you are visually impaired and listening to the list of links for the a university’s course catalogues.
You hear:
program course program course program course program course… Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 36
Link examples Which goes with which?
To go where?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 37
Quality Link Text
Will link text make sense out of context, in a list of links? ► Descriptive link text lets users know where the link goes.
► ► ► ► Links to the same place should have the same text; Links to different pages should be different.
Test the links out of context.
Raw links (where the link is the http://url) may be hard for those using a screen reader to interpret. The screen reader just reads the whole long URL but doesn't convey information.
Avoid duplicate adjacent links ► Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 38
Quality Link Guidelines
Will link text make sense out of context, in a list of links?
Related Guidelines: WCAG 13.1. Note: this is NOT part of the 508 guideline. It will be part of WCAG 2.0.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 39
Making Complex Elements Accessible
► Cascading Style Sheets ► Data Tables ► Frames ► Scripts ► Forms ► Navigation Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 40
Cascading Style Sheets
► Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. ► CSS is an effective way to separate content from presentation Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 41
Issues with Stylesheets
► When using a hybrid approach to web design, some people use CSS for simple things like text properties but still use tables for layout.
► This presents a possible problem if CSS is off/broken or not supported.
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 42
Issues with Stylesheets
► Users have the ability to override stylesheets and create their own. They might, for example, create a light text on dark background stylesheet.
► CSS colors should be declared in pairs so that if they are overridden, they are overridden together.
► #header { ► ► color: #000; background-color: #ccc; ► } Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 43
Issues with Stylesheets
► Most modern browsers support stylesheets, but we can’t always guarantee that they are used and/or delivered.
► We need to ensure that pages are readable without stylesheets as well.
► This includes checking for positioning/content order, color issues, and generated content Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 44
CSS Guidelines
(d) Documents shall be organized so they are readable without requiring an associated style sheet. Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 45
Other CSS Issues
► Use relative units to allow pages to “resize” based on user need ► ► Use percentages to specify the width of tables. This refers to the percentage of the screen that the table will fill Use percent (%), em, or the terms larger, smaller, etc. for the font-size property. This sets font-size relative to the defaults specified by the user, and allows him or her to change font sizes as needed using the browser ► Related guidelines: WCAG 3.4
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 46
The Power of CSS
► Designing with CSS ► Separate content from presentation ► Make maintaining a site more effective and efficient ► See CSS in Action at www.csszengarden.com
*note – sites at csszengarden are not necessarily accessible Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 47
Working with Data Tables
► Visually we can map column and row headings to find the data in their intersection points, and find the appropriate headings from the intersection points in a data cell ► We need to provide the same type of functionality to those that need the assistance of a screen reader.
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 48
Simple Data Tables
scope=“col” >1998 | 1999 | 2000 | |
---|---|---|---|
scope=“row” >Fund | 17.7 | ...
Accessible Web Design Techniques 49
Complex DataTables
Copyright © 2005 Knowbility, Inc .
Accessible Web Design Techniques 50